<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>运营服务</a-breadcrumb-item>
        <a-breadcrumb-item>用户意见反馈</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <div style="margin: 0 50px">是否答复</div>
          <a-button
            type="primary"
            style="margin: 0 0 0 20px"
            @click="statusClick()"
            >全部</a-button
          >
          <a-button
            type="primary"
            style="margin: 0 0 0 20px"
            @click="statusClick(1)"
            >已答复</a-button
          >
          <a-button
            type="primary"
            style="margin: 0 0 0 20px"
            @click="statusClick(0)"
            >未答复</a-button
          >
        </div>
      </div>
    </div>

    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex">
          <a-button type="primary" @click="replyClick" icon="download"
            >回复</a-button
          >
        </div>
      </div>
      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          bordered
          size="small"
          :scroll="scroll"
          :customRow="customRow"
          :rowClassName="setRowClassName"
          @change="queryPageData"
        >
          <template slot="replyStatus" slot-scope="text">
            <template v-if="text === '1'">
              <div>已回复</div>
            </template>
            <template v-else-if="text === '0'">
              <div>未回复</div>
            </template>
          </template>
          <template
            slot="isComplain"
            slot-scope="text, record"
            class="ant-switch-checked"
          >
            <a-switch
              checkedChildren="开启"
              unCheckedChildren="关闭"
              :checked="switchChecked(text)"
              @change="changeComplaint($event, record)"
            ></a-switch>
          </template>
        </a-table>
      </div>
    </div>

    <!-- 对话框 -->
    <a-modal
      title="回复"
      v-model="replyModal.visible"
      @ok="commitReply"
      :confirmLoading="replyModal.loading"
    >
      <div class="box-modal-complain">
        <div class="text-label">求助内容</div>
        <textarea
          class="textarea"
          style="background-color: #eeeeee"
          disabled
          rows="3"
          v-model="replyModal.defaultText"
        />
        <div class="text-label" style="margin-top: 15px">回复内容</div>
        <textarea class="textarea" rows="3" v-model="replyModal.content" />
      </div>
    </a-modal>
    <!-- 图片弹框 -->
    <a-modal
      title="申诉图片"
      v-model="correctPopupData.visible"
      :width="1280"
      @cancel="cancelCorrect"
      :confirmLoading="correctPopupData.loading"
    >
      <div class="box-correction-popup">
        <!-- 图片 -->
        <a-carousel class="box-image" autoplay>
          <template v-for="image in correctPopupData.imageList">
            <img :key="image" :src="image" class="icon-image" />
          </template>
        </a-carousel>
      </div>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import UserFeedbackApi from "../../api/operate/UserFeedback";

const columns = [
  {
    title: "序号",
    dataIndex: "no",
    width: "5%",
  },
  {
    title: "求助人",
    dataIndex: "nickName",
    width: "10%",
  },
  {
    title: "请求时间",
    dataIndex: "createdTime",
    width: "10%",
  },
  {
    title: "求助内容",
    dataIndex: "requestContent",
    width: "10%",
  },
  {
    title: "当前状态",
    dataIndex: "status",
    width: "10%",
    scopedSlots: { customRender: "replyStatus" },
  },
  {
    title: "答复内容",
    dataIndex: "replayContent",
    width: "10%",
  },
  {
    title: "是否可申诉",
    dataIndex: "isComplain",
    width: "8%",
    scopedSlots: { customRender: "isComplain" },
  },
];
const dataSource = [];

const queryCondition = {
  limit: 10,
  curr: 1,
  plate: "",
  status: "",
  timeScreenCondition: 6,
  startTimeStamp: "",
  endTimeStamp: "",
};
const replayCondition = {
  replayContent: "",
  id: "",
};

export default {
  name: "UserFeedBack",
  /*数据层*/
  data() {
    return {
      parks: [],
      selectId: -1,
      momentArr: [],
      columns: columns,
      dataSource: dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 10,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 10,
      },
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      tableState: {
        rowId: -1,
      },
      /*当前选中的行数据*/
      currRowData: "",
      queryCondition,
      replayCondition,
      inputPlate: "",
      status: "",
      replyModal: {
        visible: false,
        defaultText: "",
        content: "",
        loading: false,
      },
      /* 修正弹窗 */
      correctPopupData: {
        visible: false,
        loading: false,
        imageList: [],
      },
      loading: false,
    };
  },
  /*方法层*/
  methods: {
    changeComplaint(obj, row) {
      var isC;
      if (obj) {
        isC = 1;
      } else {
        isC = 0;
      }
      var ob = {
        id: row.id,
        isComplain: isC,
      };
      UserFeedbackApi.updateIsComplain(ob)
        .then((data) => {
          if (data.code != 2000) {
            this.$message.error("修改可申诉失败");
          } else {
            this.$message.success("修改成功");
            this.queryData();
          }
        })
        .catch((error) => {
          this.$message.error("获取用户意见反馈/申诉数据异常:" + error);
        });
    },
    switchChecked(text) {
      if (text == 1) {
        return true;
      } else {
        return false;
      }
    },
    /*时间按钮控制*/
    button_time(e) {
      this.selectId = e;
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          break;
        case 2:
          momentStart = moment().week(moment().week()).startOf("week");
          momentEnd = moment().week(moment().week()).endOf("week");
          break;

        case 3:
          momentStart = moment()
            .week(moment().week() - 1)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() - 1)
            .endOf("week");
          break;
        case 4:
          momentStart = moment().month(moment().month()).startOf("month");
          momentEnd = moment().month(moment().month()).endOf("month");
          break;
        default:
          break;
      }
      this.momentArr[0] = momentStart;
      this.momentArr[1] = momentEnd;
      this.queryData();
    },

    /*日期选择*/
    onChange(date) {
      this.selectId = -1;
      this.momentArr = date;
    },

    onOk() {
      this.selectId = -1;
      this.queryData();
    },

    rangePicker() {
      return this.momentArr;
    },

    plateSearch() {
      this.queryData();
    },

    statusClick(value) {
      if (value == undefined) {
        this.status = "";
      }
      this.status = value;
      this.queryData();
    },

    /*表格*/
    customRow(record) {
      return {
        on: {
          // 事件
          click: () => {
            this.currRowData = record;
            this.tableState.rowId = record.id;
          }, // 点击行
          dblclick: () => {
            this.showCorrectionPopup(record);
          },
        },
      };
    },

    setRowClassName(record) {
      return record.id === this.tableState.rowId ? "clickRowStyl" : "";
    },

    cancelCorrect() {
      this.correctPopupData.visible = false;
    },

    /* ------------------ 数据请求 ------------------ */
    queryPageData(page) {
      this.queryData(page.current);
    },

    queryData(pageNum) {
      this.loading = true;
      this.tableState.rowId = -1;
      let condition = this.queryCondition;
      let beginMoment = this.momentArr[0];
      let endMoment = this.momentArr[1];
      if (beginMoment != undefined && endMoment != undefined) {
        condition.startTimeStamp = new Date(beginMoment).getTime() / 1000;
        condition.endTimeStamp = new Date(endMoment).getTime() / 1000;
        condition.timeScreenCondition = 6;
      } else {
        condition.timeScreenCondition = 0;
      }
      condition.plate = this.inputPlate;
      condition.status = this.status;
      condition.curr = pageNum || 1;

      UserFeedbackApi.getUserFeedbackList(condition)
        .then((data) => {
          let { list, total, pageNum, pageSize } = data.data;
          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.dataSource = array;
          this.pagination.total = total;
          this.loading = false;
        })
        .catch(() => {
          this.$message.error("获取用户意见反馈/申诉数据异常");
          this.loading = false;
        });
      this.status = "";
    },

    /* ------------ 弹窗 ------------ */
    replyClick() {
      if (this.tableState.rowId == -1) {
        this.$message.info("请选择一个条目来进行回复");
        return;
      }

      let item = this.dataSource.filter(
        (item) => item.id == this.tableState.rowId
      )[0];
      if (!item) return;
      if (item.status != 0) {
        this.$message.error("不能重复回复");
        return;
      }

      this.replyModal.visible = true;
      this.replyModal.defaultText = item.requestContent;
      this.replyModal.content = item.replayContent;
      this.replyModal.id = item.id;
    },
    // 图片展示弹窗
    showCorrectionPopup(item) {
      console.log(item);
      let images = item.images;
      console.log(images);
      this.correctPopupData.visible = true;
      let imageList = [];
      if (images) {
        let array = images.split(",").map((item) => {
          if (item != "none") {
            return item;
          }
        });
        imageList.push(...array);
        this.correctPopupData.imageList = imageList;
        this.correctPopupData.loading = false;
      } else {
        this.correctPopupData.imageList = [];
      }
    },
    commitReply() {
      let { content, id } = this.replyModal;
      if (!content) {
        this.$message.error("回复内容不能为空");
        return;
      }
      let condition = { id, replayContent: content };
      this.replyModal.loading = true;
      UserFeedbackApi.replayUserFeedback(condition)
        .then(() => {
          this.replyModal.loading = false;
          this.replyModal.visible = false;
          this.refreshReplayContent(id, content);
        })
        .catch(() => {
          this.replyModal.loading = false;
          this.$message.error("回复出错");
        });
    },

    refreshReplayContent(id, content) {
      let item = this.dataSource.filter((item) => item.id == id)[0];
      if (!item) return;
      item.status = "1";
      item.replayContent = content;
    },
  },

  /*计算层*/
  computed: {
    computedStyle() {
      return function (selectId) {
        return this.selectId == selectId ? "" : "";
      };
    },
  },

  /*渲染层*/
  mounted() {
    this.button_time(0);
  },
};
</script>

<style scoped>
.ant-switch-checked {
  background-color: #1890ff;
}
.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 174px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-item {
  display: flex;
  align-items: center;
  min-width: 1500px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 0;
}

.box-condition-item .box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 5px 20px 5px;
}

.button_time button {
  margin-left: 10px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%;
  /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 弹窗 */
.box-modal-complain .textarea {
  margin: 15px 0px 0px 0px;
  width: 595px;
  height: 100px;
  resize: none;
  /*  */
  display: block;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s,
    box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
</style>
